<template>
  <div>
    <el-row style="height: 50px"></el-row>
    <el-container>
      <el-main>
        <el-row>
          <el-col :span="22" :offset="1">
            <el-card>
              <el-row>
                <el-col :span="18">
                  <el-image
                    :src="imageUrl"
                    style="height: 500px"
                  ></el-image>
                </el-col>

                <el-col :span="5" :offset="1">
                  <el-form
                    :model="LoginForm"
                    ref="LoginForm"
                    :rules="rules"
                    label-width="0"
                    style="align: 'center'"
                  >
                    <h3
                      style="
                        font-weight: bolder;
                        font-size: larger;
                        margintop: 80px;
                        margin-bottom: 30px;
                      "
                    >
                      登录
                    </h3>

                    <el-form-item prop="user_tel">
                      <el-input
                        type="text"
                        v-model="LoginForm.user_tel"
                        placeholder="请输入11位的电话号码"
                      ></el-input>
                    </el-form-item>

                    <el-form-item prop="user_password">
                      <el-input
                        type="password"
                        v-model="LoginForm.user_password"
                        placeholder="请输入密码"
                      ></el-input>
                    </el-form-item>

                    <el-form-item>
                      <el-button
                        type="danger"
                        class="submitBtn"
                        round
                        @click="login('LoginForm')"
                        >登录</el-button
                      >
                      <el-button
                        type="success"
                        class="submitBtn"
                        round
                        @click="reset('LoginForm')"
                        >取消</el-button
                      >
                    </el-form-item>
                  </el-form>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
        </el-row>
      </el-main>

      <el-footer style="margintop: 30px">
        <el-divider content-position="center"
          >Copyright @ 客户关系管理系统</el-divider
        >
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import {md5} from "../MD5"
export default {
  data() {
    return {
      //登录表单信息
      LoginForm: {
        user_tel: "",
        user_password: "",
      },

      //验证规则
      rules: {
        user_tel: [
          { required: true, message: "请填写电话", trigger: "blur" },
          { len: 11, message: "必须是11位的数字", trigger: "blur" },
          {
            pattern: /^^[1][3,4,5,7,8,9]\d{9}$$/,
            message: "电话号码为13、14、15、17、18、19开头",
            trigger: "blur",
          },
        ],
        user_password: [
          {
            required: true,
            min: 6,
            max: 32,
            message: "密码长度为6~32位",
            trigger: "blur",
          },
        ],
      },

      imageUrl: require("../assets/loginPic.jpg"),
    };
  },
  methods: {
    // 提交表单
    login(LoginForm) {
      this.$refs[LoginForm].validate((valid) => {
        // alert(valid);
        if (valid) {
          //前端表单验证成功,向服务器发送请求
          this.$axios
            .get("/users", {
              params: {
                user_tel: this.LoginForm.user_tel,
                user_password: md5(this.LoginForm.user_password),
              },
            })
            .then((resp) => {
              //console.log(md5(this.LoginForm.user_password));
              if (resp.data.status == 1000) {
                // login_user
                let login_user = resp.data.data;
                //在session中存放当前用户user_id
                sessionStorage.setItem("user_id", login_user.user_id);
                //在session中存放当前用户user_name
                sessionStorage.setItem("user_name", login_user.user_name);
                //在session中存放当前用户role_id
                // console.log(login_user.role_id);
                sessionStorage.setItem("role_id", login_user.role_id);
                //在session中存放当前用户的user_code
                sessionStorage.setItem("user_code", login_user.user_code);
                //在session中存放当前用户user_password
                sessionStorage.setItem(
                  "user_password",
                  login_user.user_password
                );
                this.$router.push("/Home");
              } else {
                this.$message({
                  type: " error",
                  message: "电话或密码错误!",
                });
              }
            })
            .catch((error) => {
              console.log("error submit!!");
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    //取消登录
    reset() {
      this.$refs[LoginForm].resetFields();
    },
  },
};
</script>

<style scoped>
.login-form {
  margin: 20px auto;
  width: 310px;
  background: #fff;
  box-shadow: 0 0 35px #b4bccc;
  padding: 30px 30px 0 30px;
  border-radius: 25px;
}
.submitBtn {
  width: 35%;
}
.to {
  color: #67c23a;
  cursor: pointer;
}
</style>
